<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>更新球队</title>
		<script type="text/javascript" src="../../js/jquery-1.11.1.js"></script>
		<script type="text/javascript" src="../../js/bootstrap.js"></script>
		<script src="../../js/global.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.css"></link>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"></link>
		<link href="../../js/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
        <script src="../../js/fileinput/js/fileinput.js" type="text/javascript"></script>
        <script src="../../js/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>
		<style>
			label span{color: #ff0000; padding-right: 5px;}
		</style>
	</head>

	<body>
		<h2>个人信息</h2>
        <form id="myFormImg" class="form-horizontal" action="/team/">
            <div class="form-group">
                <!--<label class="col-sm-1 control-label">现有球队logo</label>-->
                <div class="col-sm-offset-1 col-sm-9">
                    <img name="headImg" src=""/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">上传头像</label>
                <div class="col-sm-3">
                    <input id="headImg" name="headImg"  type="file" required/>
                </div>
            </div>
        </form>
        
		<form id="myFormMsg" class="form-horizontal">
			<!--springmvc的restful风格处理非get post方式请求必备参数-->
			<!--<input name="_method"  type="hidden" value="PUT"/>-->	
			<div class="form-group">
				<label class="col-sm-1 control-label"><span>*</span>用户名</label>
				<div class="col-sm-9">
					<input required="required" name="loginName" class="form-control" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-1 control-label">密码</label>
				<div class="col-sm-9">
					<input name="adminPwd" class="form-control" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-1 control-label"><span>*</span>昵称</label>
				<div class="col-sm-9">
					<input required="" name="petName" class="form-control" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-1 control-label">电话号</label>
				<div class="col-sm-9">
					<input name="phone" class="form-control" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-1 control-label">角色</label>
				<div class="col-sm-2">
					<select name="roleId" class="form-control">
         				<option value="-1">请选择角色</option>
         				<option value="1">超级管理员</option>
         				<option value="2">球队经理</option>
         				<option value="3">主教练</option>
			      	</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-1 control-label">状态</label>
				<div class="col-sm-2">
					<select name="status" class="form-control">
         				<option value="-1">请选择状态</option>
         				<option value="1">正常</option>
         				<option value="2">冻结</option>
			      	</select>
				</div>
			</div>
			<!--<div class="form-group">
				<label class="col-sm-1 control-label">状态</label>
				<div class="col-sm-2">
					<select name="status" class="form-control">
         				<option value="-1">请选择状态</option>
         				<option value="1">正常</option>
         				<option value="2">已注销</option>
			      	</select>
				</div>
			</div>-->
			<div class="form-group">
				<label class="col-sm-1 control-label"></label>
				<div class="col-sm-9">
					<button id="btnUpdate" type="button" class="btn btn-sm btn-info">提&nbsp;交</button>
					<button type="reset"  class="btn btn-sm btn-warning">重&nbsp;置</button>
				</div>
			</div>
		</form>		
	</body>
</html>
<script>
	String.prototype.GetValue= function(para) {
		let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
		let r = this.substr(this.indexOf("\?")+1).match(reg);
		if (r!=null) return unescape(r[2]); return null;
	}
	$(function () {
		//根据地址获取teamId,如果null则执行增加，否则执行更新
		let url = document.location.toString();//获取URL
		let adminsId=url.GetValue("adminsId");
		let pageNum=url.GetValue("pageNum");
		let pageSize=url.GetValue("pageSize");
		//根据id查询要个人信息
		queryById(adminsId);
		// 注册文件上传
		myUploadImg(adminsId)
		//提交按钮的单击事件--实现真正的更新
		$("#btnUpdate").click(function () {
			$.ajax({
				type: "POST",//这里必须写POST
				url: myurl + "/admins/"+adminsId,
				data: $("#myFormMsg").serialize()+"&_method=PUT&forwardUrl=" + forwardUrl,
				dataType:"json",
				success: function(vo){
					if(vo.code==200) {
						window.location.href = "list.html?pageNum="+pageNum+"&pageSize="+pageSize;
					}else{
						alert("更新失败！"+vo.msg);
					}
				}
			});
		});
	});
	// 上传图片
	function myUploadImg(adminId) {
        //使用js把文件域转换成fileinput对象
         $("#headImg").fileinput({
             uploadUrl: myurl + "/admins/headImg/"+adminId + "?forwardUrl=" + forwardUrl, //接受请求地址
             uploadAsync : true, //默认异步上传
             showUpload : true, //是否显示上传按钮,跟随文本框的那个
             showRemove : true, //显示移除按钮,跟随文本框的那个
             showCaption : true,//是否显示标题,就是那个文本框
             showPreview : true, //是否显示预览,不写默认为true
             dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
             //minImageWidth: 50, //图片的最小宽度
             //minImageHeight: 50,//图片的最小高度
             //maxImageWidth: 1000,//图片的最大宽度
             //maxImageHeight: 1000,//图片的最大高度
             //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
             //minFileCount: 0,
             maxFileCount : 1, //表示允许同时上传的最大文件个数
             enctype : 'multipart/form-data',
             validateInitialCount : true,
            /* previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",*/
             msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
             allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
           // allowedPreviewMimeTypes : ['image/jpeg','image/jpg'],//控制被预览的所有mime类型
             language : 'zh'
         });
        //异步上传返回结果处理
        $('#headImg').on('fileerror', function(event, data, msg) {
            alert("上传失败！"+msg);
        });
        //异步上传返回结果处理
        $("#headImg").on("fileuploaded", function(event, data, previewId, index) {
            let ref = $(this).attr("data-ref");
            $("input[name='" + ref + "']").val(data.response.url);
            //上传成功
            layer.msg("头像上传成功")
        });
    }
	// 查询用户信息
	function queryById(adminsId) {
		$.ajax({
			type: "GET",
			url: myurl + "/admins/"+adminsId + "?forwardUrl=" + forwardUrl, //RESTful风格的API定义
			data: "",
			xhrFields: {
			    withCredentials: true
			},
			crossDomain: true,
			success: function (vo) {
				let obj=vo.obj;
				let loginName=obj.loginName;
				let adminPwd=obj.adminPwd;
				let petName=obj.petName;
				let phone=obj.phone;
				let roleId=obj.roleId;
				let headImg=obj.headImg;
				let status=obj.status;
				$("input[name='loginName']").val(loginName);
				$("input[name='adminPwd']").val(adminPwd);
				$("input[name='petName']").val(petName);
				$("input[name='phone']").val(phone);
				$("select[name='roleId']").val(roleId);
				$("select[name='status']").val(status);
				$("img[name='headImg']").attr("src",forwardUrl + "/img/uploadFile/" + headImg);
			}
		});
	}

</script>